<template>
  <div>
    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    <van-grid>
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <div class="box">
      <h5>aaa</h5>
      <a href="##">bb</a>
    </div>
    <div class="checkboxC">
      <van-checkbox v-model="checked" ref="checkbox">复选框</van-checkbox>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
  </div>
</template>

<script>
import { aboutUs, aboutUs2, userLogin } from "../../apis/api";
export default {
  name: "Home",
  data() {
    return {
      checked: false,
      show: false,
      actions: [
        { name: "选项" },
        { name: "选项" },
        { name: "选项", subname: "描述信息" }
      ]
    };
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      //Toast(item.name);
    }
  },
  created() {},
  // 注意：组件挂载后才能访问到 ref 对象
  mounted() {
    this.$refs.checkbox.toggle();
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-checkbox__label {
  font-size: 50px !important;
}
.box {
  margin: auto;

  font-size: 32px;
  width: 590px;
  height: 300px;
  background: green;
  h5 {
    background: red;
  }
}
.cell-icon {
  display: block;
  width: 20px;
  margin-right: 5px;
}
</style>